<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智慧社区后台</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/bootstrap-table/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-switch/css/bootstrap-switch.min.css" />
</head>
<style>
</style>
<body style="padding-bottom: 90px; background-color: #ECF0F5;">
	<section class="content" style="margin: 15px; background-color: white;">
		<div class="row">
			<div class="col-sm-12">
				<table id="table">
					<thead style="background-color: #00C0EF">
						<tr style="background-color: #00C0EF">
							<th class="text-center" data-field="createTime">时间</th>
							<th class="text-center" data-field="payObjectName">缴费对象</th>
							<th class="text-center" data-field="payProject">缴费项目</th>
							<th class="text-center" data-field="price">金额</th>
							<th class="text-center" data-field="source">来源</th>
							<th class="text-center" data-field="orderId">订单号</th>
							<th class="text-center" data-field="serialNumber">流水号</th>
							<th class="text-center" data-field="payMethod">付款方式</th>
							<th class="text-center" data-field="remark">备注</th>
							<th class="text-center" data-field="id">操作</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</section>
</body>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-export.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/tableExport.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-toolbar.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-table/js/bootstrap-table-filter-control.js"></script>
<!-- layer -->
<script src="${pageContext.request.contextPath}/plugins/layer/2.4/layer.js"></script>
<script src="${pageContext.request.contextPath}/js/date.js"></script>
<script>
	function actionFormatter(value, row, index) {
		var check = "<button class='btn btn-primary btn-xs glyphicon glyphicon-pencil' onclick='showModal(\""
				+ row.id + "\");'>查看详情</button>";
		return check;
	}
	var table_dataset = [ {
		field : 'createTime',
		align : 'center',
		formatter : function formatter(value, row, index) {
			return (new Date(row.createTime)).Format("yyyy-MM-dd hh:mm:ss");
		}
	}, {
		field : 'payObjectName',
		align : 'center',
	}, {
		field : 'payProject',
		align : 'center',
	}, {
		field : 'price',
		align : 'center',
		formatter : function formatter(value, row, index) {
			return row.price + "元";
		}
	}, {
		field : 'source',
		align : 'center',
	}, {
		field : 'orderId',
		align : 'center',
	}, {
		field : 'serialNumber',
		align : 'center',
	}, {
		field : 'payMethod',
		align : 'center',
	}, {
		field : 'remark',
		align : 'center',
	}, {
		align : 'center',
		formatter : actionFormatter,
	} ];
	$('#table').bootstrapTable({
		url : "${pageContext.request.contextPath}/selectPropertyBills",
		idField : "id",
		columns : table_dataset,
		striped : true, //是否显示行间隔色
		pagination : true, //是否显示分页
		pageSize : 10, //每页的记录行数
		pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数
		search : false, //是否显示搜索
		showRefresh : true,
		sidePagination : "server", //表示服务端请求  
		queryParamsType : "limit",
		queryParams : function queryParams(params) { //设置查询参数  
			var param = {
				offset : params.offset,
				limit : params.limit
			};
			return param;
		},
		// 						toolbar : "<button class='btn btn-primary glyphicon glyphicon-plus' onclick='showModal(\""
		// 								+ '' + "\");'>新增数据</button>",
		// 						+"&nbsp;<button class='btn btn-danger glyphicon glyphicon-trash'>批量删除</button>",
		icons : {
			paginationSwitchDown : 'glyphicon-collapse-down icon-chevron-down',
			paginationSwitchUp : 'glyphicon-collapse-up icon-chevron-up',
			refresh : 'glyphicon-refresh icon-refresh',
			toggle : 'glyphicon-list-alt icon-list-alt',
			columns : 'glyphicon-th icon-th',
			detailOpen : 'glyphicon-plus icon-plus',
			detailClose : 'glyphicon-minus icon-minus',
			"export" : 'glyphicon-export icon-share'
		},
		showExport : true,
		exportDataType : 'basic',
		exportTypes : [ 'json', 'xml', 'csv', 'txt', 'sql', 'excel' ],
	});

	//弹窗
	function showModal(id) {
		layer.msg('正在开发中...', {
			icon : 1,
			time : 800
		});
		// 		layer.open({
		// 			type : 2,
		// 			area : [ '700px', '500px' ],
		// 			fix : false, //不固定
		// 			maxmin : true,
		// 			shade : 0.4,
		// 			offset : [ 150 ],
		// 			title : '编辑',
		// 			content : '${pageContext.request.contextPath}/jump_goods_edit?id='
		// 					+ id,
		// 			btn : [ "保存" ],
		// 			btn1 : function(index, layero) {
		// 				var iframeWin = window[layero.find('iframe')[0]['name']];
		// 				iframeWin.insert();//执行子页面的方法
		// 			}
		// 		});
	}
</script>
</html>
